<template>
  <div class="edit-guarantee">
    <div class="position-div" ref="positionDiv"></div>
    <block
      v-for="(item, index) in list"
      :key="item.id"
      :data="item"
      :reverse="index % 2 === 1"
    ></block>
    <div class="load-more-wrap" v-if="noData">
      没有更多数据了
    </div>
  </div>
</template>

<script>
import Block from './components/Block.vue';

export default {
  name: 'EditGuarantee',
  components: {
    Block
  },
  data() {
    return {
      baseObj: {
        id: 0,
        name: '扑克之星',
        compensationAmount: 10000000,
        userCount: 13871,
        establishedTime: '2019-07-10',
        licensePlate: '菲律宾博彩监督委员会',
        companyPerson: 580,
        licenseNo: 'PAGCOR',
        withdrawalLimit: 10000000,
        bottomPour: '1000-200000',
        gameList: ['真人', '彩票', '棋牌', '电子游戏', '休闲', '捕鱼', '扑克'],
        gamePlate: ['AG真人', 'AG电子', 'MG', 'PT电子']
      },
      list: [],
      perLength: 10,
      loading: false,
      noData: false
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    const that = this;
    const intersectionObserver = new IntersectionObserver(entries => {
      const { isIntersecting } = entries[0];
      if (isIntersecting && !this.noData) {
        that.getData();
      }
    });
    intersectionObserver.observe(this.$refs.positionDiv);
  },
  methods: {
    getData() {
      this.mockData().then(res => {
        this.list.push(...res);
        if (res.length < this.perLength) {
          this.noData = true;
        }
      });
    },
    mockData() {
      const list = new Array(this.perLength).fill(0);
      const baseLen = this.list.length;
      list.forEach((item, index, arr) => {
        arr[index] = {
          ...this.baseObj,
          id: baseLen + index
        };
      });
      return new Promise(resolve => {
        if (this.noData) {
          resolve([]);
        } else {
          resolve(baseLen > 10 ? list.slice(0, 5) : list);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../less/global.less';
  .edit-guarantee {
    position: relative;
    background-color: #fff;
    .position-div {
      position: absolute;
      bottom: 400px;
      width: 100%;
    }
    .load-more-wrap {
      padding-bottom: 10px;
      line-height: 24px;
      text-align: center;
      .text {
        color: @mainBgColor;
        cursor: pointer;
      }
      .huobo-loading {
        margin: 0 auto;
        width: 20px;
        color: @mainBgColor;
        animation: loading 1s linear infinite;
        @keyframes loading {
          0% {
            transform: rotate(0);
          };
          50% {
            transform: rotate(180deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      }
    }
  }
</style>
